<template>
    <div>
        <el-form ref="form" :model="formData" :rules="rules" :label-width="formLabelWidth">

            <el-form-item label="应用名" :error="joinToString(formErrors.name||'')" prop="name">
                <el-row>
                    <el-col :span="12" :xs="24">
                        <el-input v-model="formData.name"></el-input>
                    </el-col>
                    <el-col :span="12" :xs="0"></el-col>
                </el-row>
            </el-form-item>

            <el-form-item label="首页地址" :error="joinToString(formErrors.domain||'')" prop="domain">
                <el-row>
                    <el-col :span="12" :xs="24">
                        <el-input v-model="formData.domain"></el-input>

                    </el-col>
                    <el-col :span="12" :xs="0"></el-col>
                </el-row>
            </el-form-item>

            <el-form-item label="密钥" :error="joinToString(formErrors.secret||'')" prop="secret">
                <el-row>
                    <el-col :span="12" :xs="24">
                        <el-input v-model="formData.secret">
                            <template slot="append">
                                <el-button native-type="button" @click="generateSecret()">生成</el-button>
                            </template>
                        </el-input>

                    </el-col>
                    <el-col :span="12" :xs="0"></el-col>
                </el-row>
            </el-form-item>

            <el-form-item label="LOGO" :error="joinToString(formErrors.logo||'')"
                          prop="logo">
                <el-row>
                    <el-col :span="12" :xs="24">
                        <input-files :data-file="formData.logoFile" file-connector="temp"
                                     v-on:change="(val)=>{formData.logo =val}"></input-files>
                    </el-col>
                    <el-col :span="12" :xs="0"></el-col>
                </el-row>
            </el-form-item>

            <el-form-item label="回调地址" :error="joinToString(formErrors.return_url||'')" prop="return_url">
                <el-row>
                    <el-col :span="12" :xs="24">
                        <el-row type="flex" v-for="(item,i) in returnUrls" :key="i">
                            <el-input v-model="item.name" size="mini">
                                <template slot="prepend">
                                    名称
                                </template>
                            </el-input>
                            <el-input v-model="item.url" size="mini">
                                <template slot="prepend">
                                    地址
                                </template>
                            </el-input>
                            <el-button native-type="button" plain type="danger" icon="el-icon-minus"
                                       @click="removeReturnUrl(i)" size="mini">移除
                            </el-button>
                        </el-row>
                        <el-button native-type="button" plain type="primary" @click="addReturnUrl" icon="el-icon-plus"
                                   size="small">添加地址
                        </el-button>

                    </el-col>

                    <el-col :span="12" :xs="0">
                    </el-col>
                </el-row>


            </el-form-item>

            <el-form-item label="简介" :error="joinToString(formErrors.summary||'')" prop="summary">
                <el-input type="textarea"  v-model="formData.summary" autosize :maxlength="300" show-word-limit></el-input>
            </el-form-item>

            <el-form-item label="是否启用" :error="joinToString(formErrors.status||'')" prop="status">

                <el-row>
                    <el-col :span="12" :xs="24">
                        <el-radio-group v-model="formData.status">
                            <el-radio v-for="(item, index) in statusOptions" :label="parseInt(item.value)" :key="index">
                                {{item.label}}
                            </el-radio>
                        </el-radio-group>
                    </el-col>
                    <el-col :span="12" :xs="0"></el-col>
                </el-row>
            </el-form-item>

            <el-form-item label="">
                <el-button type="primary" @click="submit">保存</el-button>
            </el-form-item>
        </el-form>

    </div>

</template>

<script>


    export default {
        components: {},
        props: {
            dataEntity: {
                type: Object,
                default: null
            },
            statusOptions: {
                type: Array,
                default: []
            },
        },
        data() {


            return {
                formLabelWidth: window.formLabelWidth || '100px',
                formData: {},
                returnUrls: {},
                formErrors: {},
                rules: {
                    name: [
                        {required: true, message: '应用名必填', trigger: 'blur'},
                    ],
                    domain: [
                        {required: true, message: '域名必填', trigger: 'blur'},
                    ],
                    secret: [
                        {required: true, message: '密钥必填', trigger: 'blur'},
                    ],


                }

            }
        },
        created() {
            this.assignData(this.dataEntity);
            //console.log(this);

        },
        mounted() {
            let _this = this;
        },
        methods: {
            assignData: function (data) {

                if (LeUtils.typeIs('object', data)) {
                    this.formData = Object.assign({}, this.formData, data)
                }
                this.returnUrls = LeUtils.valueGet(this.formData, 'return_url', [])
                this.formData.logoFile = LeUtils.buildInputFile(this.formData, 'logo')
                console.log(this.formData)
            },
            joinToString: function (obj, glue) {
                return LeUtils.joinToString(obj, glue)
            },
            addReturnUrl: function () {

                this.returnUrls.push({
                    name: "",
                    url: "",
                })

            },
            removeReturnUrl: function (index) {
                //delete(this.tplPorts[index]);
                this.returnUrls.splice(index, 1);
            },

            generateSecret: function () {
                this.formData.secret = LeUtils.randomString(16);
            },


            submit: function (event) {

                if (event) {
                    event.preventDefault()
                }
                let _this = this;

                this.$refs['form'].validate((valid) => {
                    //console.log(valid);
                    if (valid) {
                        //console.log(_this.formData)

                        _this.formData.return_url = _this.returnUrls;

                        LeRoute.request('api.oauth-apps.save', _this.formData).then(function (res_data) {
                            _this.$message.success('保存成功')
                            _this.assignData(LeUtils.valueGet(res_data, 'data', {}))
                        }).catch(function (error) {
                            _this.formErrors = LeUtils.valueGet(error, 'response.data.errors', {});
                        })

                    } else {
                        //console.log('error submit!!');
                        return false;
                    }
                });
            },
        }
    }
</script>
